<template>
  <div id="app">
    <ul  ref="uls">
      <li v-for="(value,index) of array" :key="index" ref="list">{{value}}</li>
    </ul>
    <!-- <button @click="scroll">添加</button> -->
  </div>
</template>

<script>
export default {
  data(){
    return{
      // 用于存放数据
      array:[],
      // 用于确定滚动条是否到达底部
      num:0,
      height:0,
      top:0,
      UlsHeight:0

    }
  },
  methods:{
    add(){
      for(let i=0; i<30; i++){
        this.array.push(i);
      }
    },
    scroll(){
      let uls=this.$refs.uls;
      this.UlsHeight=window.getComputedStyle(uls).height.split('px').join(''); 
      this.top=document.body.scrollTop;
      this.height=document.body.scrollHeight;
      if((this.top+this.height)>=this.UlsHeight){
        this.add();
      } 
    }
  },
  mounted(){
    this.add();
    window.addEventListener("scroll",this.scroll);
  },
  // watch:{
  //   num(val){
  //     if(val>0){
  //       this.scroll();
  //       this.num=0;
  //     }
  //   }
  // }
}  
</script>
<style> 
</style>
